
/**
 * 3d轮播图
 * @param elem
 * @param options
 * @constructor
 */
import defaultImg from './img/defaultImg.png';
function Carousel(elem, options) {
    // curDisplay 当前播放第几个（0为第一个）
    // autoPlay 是否开启自动轮播
    // interval 自动轮播间隔时间
    this.defaults = { curDisplay: 0, autoPlay: false, interval: 5000 }; // 默认配置
    this.opts = $.extend({}, this.defaults, options); // 在jQuery命名空间上增加两个函数

    let self = this;
    this.data = this.opts.data.length >8 ? this.opts.data : this.opts.data.concat(this.opts.data);

    // console.log(this.opts.data.length);
    // 创建元素-start
    let mainBox = '<ul class="carousel">';
    this.data.forEach(function (item) {
        let img = item.imgUrl ? item.imgUrl : defaultImg;
        mainBox += `<li class="item">
                        <div class="img" style="background-image: url('${img}')"/>
                        <span class="name">${item.name}</span>&nbsp;
                        <span class="value">${item.value}</span>
                    </li>`;
    });

    mainBox += '</div>';
    // 放入轮播进步点
    elem.html('').append(mainBox);
    // 创建元素-end
    this.$carousel = elem.find('.carousel');    // 轮播实例
    this.$aImg = this.$carousel.find('.item');    // 需要轮播的元素

    this.imgLen = this.$aImg.length;            // 轮播图数量
    this.curDisplay = this.opts.curDisplay;
    this.autoPlay = this.opts.autoPlay;

    this.viewWidth = this.$carousel.width() / 2;     // 视图宽度
    this._height = this.$aImg.first().height();     // item高度
    this.b_switch = true;                       // 切换
    this.iNow = this.opts.curDisplay;           // 当前播放第几个
    this.timer = null;                          // 计时器
    this.interval = this.opts.interval;         // 间隔时间

    this.inital();
}

Carousel.prototype = {
    play: function () {
        if (this.autoPlay) {
            if (this.iNow === this.imgLen - 1) {
                this.iNow = 0;
            } else {
                this.iNow++;
            }

            this.movingNext(this.iNow);
        }
    },

    movingPrev: function (index) {

        this.curDisplay = index;

        this.initalCarousel();
    },

    movingNext: function (index) {
        this.curDisplay = index;
        this.initalCarousel();
    },

    // 执行渲染
    initalCarousel: function () {
        let self = this;
        let half_imgLen = Math.floor(this.imgLen / 2);
        let leftNum;
        let rightNum1;
        let rightNum;
        let rightNum2;

        let k = 0;
        for (let i = 0; i < half_imgLen; i++) {
            leftNum = this.curDisplay - i - 1;
            if (k === 0) {
                // 左边第二个归位，即倒数第二个
                this.$aImg.eq(leftNum - 1).stop().css({
                    transform: 'translateX(117px) translateY(65px) translateZ(0px)',
                }).animate({
                    opacity: 1
                }, 200);
                // 左边第三个归位，即倒数第三个
                this.$aImg.eq(leftNum - 2).stop().css({
                    transform: 'translateX(68px) translateY(115px) translateZ(0px)',
                }).animate({
                    opacity: 1
                }, 200);
                this.$aImg.eq(leftNum).attr('onclick', null);

                rightNum1 = this.curDisplay + i + 1;
                rightNum2 = this.curDisplay + i + 1 + 1;

                if (rightNum1 === this.imgLen - 1) {
                    rightNum2 = 0;
                }
                if (rightNum1 === this.imgLen) {
                    rightNum1 = 0;
                    rightNum2 = 1;
                }
                // 右边第二个归位，即正数第二个
                this.$aImg.eq(rightNum1).stop().css({
                    transform: 'translateX(122px) translateY(-108px) translateZ(0px)',
                }).animate({
                    opacity: 1
                }, 200);
                // 右边第三个归位，即正数第三个
                this.$aImg.eq(rightNum2).stop().css({
                    transform: 'translateX(74px) translateY(-162px) translateZ(0px)',
                }).animate({
                    opacity: 1
                }, 200);
                this.$aImg.eq(rightNum1).attr('onclick', null);
                k++;
            } else {
                this.$aImg.eq(leftNum - 2).stop().css({
                    transform: 'translateX(-360px) translateY(-410px) translateZ(-1000px)',
                }).animate({
                    opacity: 0
                }, 100);

                rightNum = this.curDisplay + i + 1;
                if (rightNum >= this.imgLen - 1) rightNum -= this.imgLen;
                this.$aImg.eq(rightNum + 1).stop().css({
                    transform: 'translateX(-360px) translateY(-410px) translateZ(-1000px)',
                }).animate({
                    opacity: 0
                }, 100);

            }
            this.$aImg.removeClass('on');
        }

        // 绑定的跳转链接
        // let _href = 'location.href=' + "'" + this.$aImg.eq(this.curDisplay).attr('data-url') + "'";
        // 将中间的高亮，默认第一张和最后一张
        this.$aImg.eq(this.curDisplay).stop().css({
            transform: 'translateX(144px) translateY(-50px) translateZ(0px)',

            // backgroundImage: 'url(' + this.opts.doubleBgActive + ')'
        }).animate({
            opacity: 1,
        }, 200).addClass('on').attr('onclick', null);

        this.$aImg.eq(this.curDisplay - 1).stop().css({
            transform: 'translateX(140px) translateY(10px) translateZ(0px)',

            // backgroundImage: 'url(' + this.opts.doubleBgActive + ')'
        }).animate({
            opacity: 1,
        }, 200).addClass('on').attr('onclick', null)

        this.$carousel.on('webkitTransitionEnd', function () {
            self.b_switch = true;
        });
    },

    inital: function () {
        let self = this;

        this.initalCarousel();

        // 点击item切换
        this.$aImg.on('click', function (ev) {
            if (self.b_switch && !$(this).hasClass('on')) {
                let direction =  self.viewWidth < $(this).position().left > 0 ? 'next' : 'prev';
                self.b_switch = false;
                let index = $(this).index();

                if (direction === 'next') {
                    self.movingNext(index);
                    self.iNow = $(this).index();

                } else {
                    if (index >= self.imgLen - 1) {
                        self.iNow = 0;
                        self.movingPrev(0);
                    } else {
                        self.iNow = $(this).index() + 1;
                        self.movingPrev(index + 1);
                    }



                }
            }
        })

        // 自动轮播
        this.timer = setInterval(function () {
            self.play();
        }, this.interval);

        this.$carousel.on('selectstart', function () {
            return false;
        });
    },

    constructor: Carousel
};

$.fn.carousel = function (options) {
    let carousel = new Carousel(this, options);

    return carousel.inital();
};
export default Carousel;
